<!--
 *Author：jxx
 *Contact：283591387@qq.com
 *业务请在@/extension/team/processprocedure/Operational.jsx或Operational.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://v3.volcore.xyz/docs/view-grid、https://v3.volcore.xyz/docs/web
 -->
<template>
    <view-grid ref="grid"
               :columns="columns"
               :detail="detail"
               :details="details"
               :editFormFields="editFormFields"
               :editFormOptions="editFormOptions"
               :searchFormFields="searchFormFields"
               :searchFormOptions="searchFormOptions"
               :table="table"
               :extend="extend"
               :onInit="onInit"
               :onInited="onInited"
               :searchBefore="searchBefore"
               :searchAfter="searchAfter"
               :addBefore="addBefore"
               :updateBefore="updateBefore"
               :rowClick="rowClick"
               :modelOpenBefore="modelOpenBefore"
               :modelOpenAfter="modelOpenAfter">
        <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
        <template #gridHeader>
        </template>
        <!-- 添加自定义编辑表单内容 -->
        <template #modelBody>
            <div class="process-selector">
                <div class="process-selector-container">
                    <div class="process-list-container">
                        <div class="process-list-header">
                            <el-checkbox v-model="allProcessesSelected">全部工序</el-checkbox>
                        </div>
                        <div class="process-list">
                            <el-checkbox-group v-model="selectedProcesses">
                                <el-checkbox v-for="item in allProcesses" :key="item.code" :label="item.code">
                                    {{item.name}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="process-transfer-buttons">
                        <el-button @click="addToCurrentFlow" type="primary" plain>
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                        <el-button @click="removeFromCurrentFlow" type="primary" plain>
                            <i class="el-icon-arrow-left"></i>
                        </el-button>
                    </div>
                    <div class="process-list-container">
                        <div class="process-list-header">
                            <span>当前Flow下工序</span>
                        </div>
                        <div class="process-list" v-if="currentFlowProcesses.length > 0">
                            <el-checkbox-group v-model="selectedCurrentFlowProcesses">
                                <el-checkbox v-for="item in currentFlowProcesses" :key="item.code" :label="item.code">
                                    {{item.name}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="no-data" v-else>
                            无数据
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </view-grid>
</template>
<script setup lang="jsx">
    import extend from "@/extension/team/processprocedure/Operational.jsx";
    import viewOptions from './Operational/options.js'
    import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
    const grid = ref(null);
    const { proxy } = getCurrentInstance()
    //http请求，proxy.http.post/get
    const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())

    // 添加工序选择相关数据
    const allProcesses = reactive([
        { code: 'ASY-01', name: 'ASY-01' },
        { code: 'TST-02', name: 'TST-02' },
        { code: 'APK-01', name: 'APK-01' },
        { code: 'TST-01', name: 'TST-01' },
        { code: 'HJ-01', name: 'HJ-01' },
        { code: 'FJ-01', name: 'FJ-01' },
        { code: 'JS-01', name: 'JS-01' },
        { code: 'QX-01', name: 'QX-01' },
        { code: 'RK-01', name: 'RK-01' },
        { code: '上料', name: '上料' }
    ]);
    const selectedProcesses = ref([]);
    const allProcessesSelected = ref(false);
    const currentFlowProcesses = reactive([]);
    const selectedCurrentFlowProcesses = ref([]);

    // 监听全选
    watch(() => allProcessesSelected.value, (newVal) => {
        if (newVal) {
            selectedProcesses.value = allProcesses.map(p => p.code);
        } else {
            selectedProcesses.value = [];
        }
    });

    // 添加到当前Flow
    const addToCurrentFlow = () => {
        if (selectedProcesses.value.length === 0) {
            proxy.$message.warning('请先选择左侧工序');
            return;
        }
        
        // 过滤出已选择但不在当前Flow中的工序
        const processesToAdd = allProcesses.filter(p => 
            selectedProcesses.value.includes(p.code) && 
            !currentFlowProcesses.some(cp => cp.code === p.code)
        );
        
        processesToAdd.forEach(p => {
            currentFlowProcesses.push({...p});
        });
        
        // 更新ProcessTiming字段
        updateProcessTiming();
    };

    // 从当前Flow移除
    const removeFromCurrentFlow = () => {
        if (selectedCurrentFlowProcesses.value.length === 0) {
            proxy.$message.warning('请先选择右侧工序');
            return;
        }
        
        // 移除选中的工序
        for (let i = currentFlowProcesses.length - 1; i >= 0; i--) {
            if (selectedCurrentFlowProcesses.value.includes(currentFlowProcesses[i].code)) {
                currentFlowProcesses.splice(i, 1);
            }
        }
        
        // 清空选择
        selectedCurrentFlowProcesses.value = [];
        
        // 更新ProcessTiming字段
        updateProcessTiming();
    };

    // 更新流程时序字段
    const updateProcessTiming = () => {
        editFormFields.ProcessTiming = currentFlowProcesses.map(p => p.code).join(',');
    };

    let gridRef;//对应[表.jsx]文件中this.使用方式一样
    //生成对象属性初始化
    const onInit = async ($vm) => {
        gridRef = $vm;
        //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
        //更多属性见：https://v3.volcore.xyz/docs/view-grid
    }
    //生成对象属性初始化后,操作明细表配置用到
    const onInited = async () => {
    }
    const searchBefore = async (param) => {
        //界面查询前,可以给param.wheres添加查询参数
        //返回false，则不会执行查询
        return true;
    }
    const searchAfter = async (rows, result) => {
        return true;
    }
    const addBefore = async (formData) => {
        //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
        return true;
    }
    const updateBefore = async (formData) => {
        //编辑保存前formData为对象，包括明细表、删除行的Id
        return true;
    }
    const rowClick = ({ row, column, event }) => {
        //查询界面点击行事件
        // grid.value.toggleRowSelection(row); //单击行时选中当前行;
    }
    const modelOpenBefore = async (row) => {//弹出框打开后方法
        return true;//返回false，不会打开弹出框
    }
    const modelOpenAfter = (row) => {
        //弹出框打开后方法,设置表单默认值,按钮操作等
        // 如果是编辑模式，解析已有的流程时序
        if (row && row.ProcessTiming) {
            const processCodes = row.ProcessTiming.split(',');
            currentFlowProcesses.length = 0; // 清空数组
            
            processCodes.forEach(code => {
                const process = allProcesses.find(p => p.code === code);
                if (process) {
                    currentFlowProcesses.push({...process});
                }
            });
        } else {
            // 新建模式，清空当前Flow
            currentFlowProcesses.length = 0;
        }
        
        // 清空选择
        selectedProcesses.value = [];
        selectedCurrentFlowProcesses.value = [];
        allProcessesSelected.value = false;
    }
    //监听表单输入，做实时计算
    //watch(() => editFormFields.字段,(newValue, oldValue) => {	})
    //对外暴露数据
    defineExpose({})
</script>
<style lang="less" scope>
.process-selector {
    padding: 10px 0;
    
    .process-selector-container {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        height: 300px;
        
        .process-list-container {
            width: 45%;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            
            .process-list-header {
                padding: 8px 12px;
                border-bottom: 1px solid #dcdfe6;
                background-color: #f5f7fa;
            }
            
            .process-list {
                flex: 1;
                overflow-y: auto;
                padding: 10px;
                
                .el-checkbox-group {
                    display: flex;
                    flex-direction: column;
                    
                    .el-checkbox {
                        margin-right: 0;
                        margin-bottom: 8px;
                    }
                }
            }
            
            .no-data {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                color: #909399;
            }
        }
        
        .process-transfer-buttons {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
        }
    }
}
</style>
